{% extends 'BASE/base.html' %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/Index/index.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/Comic/readingRoom.css' %}"/>
{% endblock %}
{% block js %}
<script src="{% static 'js/Comic/readingRoom.js' %}" type="text/javascript" charset="utf-8"></script>
{% endblock %}
{% block title %} {{comic.cName}}-书漫网O(∩_∩)O哈哈~ {% endblock %}
{% block main %}
<div class="container-fluid mt-5">
	<div class="row justify-content-center text-center">
		<div class="col-2 bd-sidebar " style="padding: 0;">
			<div class="accordion" id="Catalog">
				<div class="card">
					<div class="card-header" id="heading">
						<h2 class="mb-0">
                            <button class="btn btn-block" type="button" data-toggle="collapse" data-target="#collapse"
                                    aria-expanded="true"
                                    aria-controls="collapse">
								目录
							</button>
						</h2>
					</div>
					<div id="collapse" class="collapse show" aria-labelledby="heading" data-parent="#Catalog">
						<div class="card-body pre-scrollable">
							{# 展示目录 #}
							{% for episode,episodeData in comic.episodes_info.items %}
							<div class="row justify-content-center">
								<a href="{% url 'Comics:readingRoom' comic.cId episode %}">{{episodeData.episodeName}}</a>
							</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col">
			<div class="row justify-content-center">
				<div class="col-lg-6 col-sm-12" id="canvas">
					{% for page in pages %}
					<div class="row justify-content-center">
						<img src="{{saveurl|slice:':-5'}}{{page}}.jpg" class="img-fluid">
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
		<div class="col-2">

		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		reading('{{comic.cId}}', '{{episode}}/1')
	})

</script>

{% endblock %}
